<template>
	<view class="baseForm">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<view class="upload-scan">
			<scan-bar ref="scanBarRef" @code-scanned="getDeliveryByCode" :key="datekey"></scan-bar>
		</view>
		<u--form labelPosition="left" :model="umodel" :rules="rules" ref="uForm" class="form" labelWidth="200rpx" errorType="toast">
			<!-- <u-form-item prop="deliveryCode" labelWidth="0">
				<u--input
					v-model="umodel.deliveryCode"
					prefixIcon="scan"
					prefixIconStyle="font-size: 22px;color: #909399"
					border="surround"
					placeholder="请先填写送货单号"
					inputAlign="left"
					clearable
					@confirm="getDeliveryByCode"
					style="border-color: rgb(242, 242, 242) !important"
				></u--input>
			</u-form-item> -->
			
			<u-subsection activeColor="#007aff" mode="subsection" :list="list" :current="curNow" @change="sectionChange"></u-subsection>
			<view v-if="curNow == 0">
				<u-form-item label="工厂" prop="plantName" required @click="openPlantSelect">
					<u--input v-model="umodel.plantName" border="none" disabled disabledColor="#ffffff" inputAlign="right" placeholder="请选择工厂"></u--input>
					<template #right>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</u-form-item>
				<u-form-item label="存储地点" prop="storageLocationName" required @click="openStorageLocationSelect">
					<u--input v-model="umodel.storageLocationName" border="none" disabled disabledColor="#ffffff" inputAlign="right" placeholder="请选择存储地点"></u--input>
					<template #right>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</u-form-item>
				<u-form-item label="供应商" prop="partnerName" required @click="openPartnerSelect">
					<u--input v-model="umodel.partnerName" border="none" disabled disabledColor="#ffffff" inputAlign="right" placeholder="请选择供应商"></u--input>
					<template #right>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</u-form-item>
				<u-form-item label="收货批次">
					<u--input v-model="umodel.stockBatch" placeholder="请填写收货批次" inputAlign="right" clearable border="none"></u--input>
				</u-form-item>
				<u-form-item label="记账日期" @click="openDaySelect">
					<u--input v-model="umodel.accountingDate" border="none" inputAlign="right" disabled disabledColor="#ffffff" placeholder="请选择日期"></u--input>
					<template #right>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</u-form-item>
				<u-line></u-line>
				<u-form-item label="目标存储类型" prop="storageTypeName" required @click="openStorageTypeSelect">
					<u--input v-model="umodel.storageTypeName" border="none" disabled disabledColor="#ffffff" inputAlign="right" placeholder="请选择目标存储类型"></u--input>
					<template #right>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</u-form-item>
				<u-form-item label="需要上架确认" prop="isOpen">
					<u-switch v-model="umodel.needOnShelfConfirm" :activeValue="1" :inactiveValue="0"></u-switch>
				</u-form-item>
				<u-form-item label="是否允许进入超储区" prop="isOpen">
					<u-switch v-model="umodel.allowInSuper" :activeValue="1" :inactiveValue="0"></u-switch>
				</u-form-item>
				<u-form-item label="打印包装标识" prop="isOpen">
					<u-switch v-model="umodel.printStorage" :activeValue="1" :inactiveValue="0"></u-switch>
				</u-form-item>
				<u-form-item label="打印机选择" prop="pick" @click="openPrinterSelect">
					<u--input v-model="umodel.printerName" border="none" disabled disabledColor="#ffffff" inputAlign="right" placeholder="请选择打印机"></u--input>
					<template #right>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</u-form-item>
			</view>
			<view v-if="curNow == 1">
	<!-- 			<u-form-item label="托盘条码" prop="name">
					<u--input
						v-model="umodel.deliveryDetailCode"
						placeholder="请填写托盘条码"
						inputAlign="right"
						clearable
						border="none"
						@confirm="checkDeliveryDetailCode"
					></u--input>
				</u-form-item>
				  
				 -->
				<!-- <u-form-item prop="name" labelWidth="0">
					<u--input
						v-model="umodel.deliveryDetailCode"
						prefixIcon="scan"
						prefixIconStyle="font-size: 22px;color: #909399"
						v-if="umodel.deliveryCode"
						border="surround"
						placeholder="请先填写送货单详情号"
						inputAlign="left"
						clearable
						@confirm="checkDeliveryDetailCode"
						style="border-color: rgb(242, 242, 242) !important"
					></u--input>
				</u-form-item> -->
				<!-- <u-line></u-line> -->
				<view class="upload-scan">
					<scan-bar ref="scanBarRef2" v-if="umodel.deliveryCode" @code-scanned="checkDeliveryDetailCode" :key="datekey2"></scan-bar>
				</view>

				<view v-if="umodel.details.length" class="list">
					<text class="list-title">托盘信息({{ umodel.details.length }})</text>
					<u-collapse>
						<view v-for="item in umodel.details" :key="item.id">
							<u-collapse-item :title="(item.isCheck ? '√' : '') + '托盘：' + item.deliveryDetailCode">
								<template v-slot:right-icon><u-icon name="arrow-right" size="14px"></u-icon></template>
								<view class="u-collapse-content">
									<view class="row">
										<text class="title">物料号：</text>
										<text class="content">{{ item.materialCode }}</text>
									</view>
									<view class="row">
										<text class="title">物料名称：</text>
										<text class="content">{{ item.materialName }}</text>
									</view>
									<view class="row">
										<text class="title">包装数量：</text>
										<text class="content">{{ item.packageQuantity }}</text>
									</view>
									<view class="row">
										<text class="title">包装容量：</text>
										<text class="content">{{ item.quantityPerPackage }}</text>
									</view>
								</view>
							</u-collapse-item>
						</view>
					</u-collapse>
				</view>
				<view v-else>
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
				</view>
			</view>

			<view v-if="curNow == 2">
				<view v-if="umodel.checks.length" class="list">
					<view v-for="item in umodel.checks" :key="item.id">
						<view class="right">
							<u-form-item :label="item.checkItemName">
								<u-switch :activeValue="1" :inactiveValue="0" v-model="item.checkResult"></u-switch>
							</u-form-item>
						</view>
					</view>
				</view>
				<view v-else>
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
				</view>
			</view>

			<!-- <u-line></u-line> -->
		</u--form>
		<!-- 提交按钮 -->
		<button type="primary" @click="submit" class="submit_btn" :loading="posting">提 交</button>
		<!-- 标准picker -->
		<u-picker :show="showPlant" :columns="plants" keyName="plantName" immediateChange @cancel="showPlant = false" @confirm="plantSelect"></u-picker>
		<u-picker
			:show="showStorageLocation"
			:columns="storageLocations"
			keyName="storageLocationName"
			immediateChange
			@cancel="showStorageLocation = false"
			@confirm="storageLocationSelect"
		></u-picker>
		<u-picker :show="showPartner" :columns="partners" keyName="partnerName" immediateChange @cancel="showPartner = false" @confirm="partnerSelect"></u-picker>
		<u-picker
			:show="showStorageType"
			:columns="storageTypes"
			keyName="storageTypeName"
			immediateChange
			@cancel="showStorageType = false"
			@confirm="storageTypeSelect"
		></u-picker>
		<u-picker :show="showPrinter" :columns="printers" keyName="printerName" immediateChange @cancel="showPrinter = false" @confirm="printerSelect"></u-picker>
		<!-- 日历选择弹窗 -->
		<u-calendar :show="showDay" round="20px" @confirm="daySelect" @close="showDay = false"></u-calendar>
	</view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { PageResult } from '../../../types/type';
import ScanBar from '@/components/scan-bar/index.vue';
import { http } from '../../../utils/http';
// 表单数据定义
const umodel = reactive({
	organizationId: '',
	organizationCode: '',
	organizationName: '',
	deliveryCode: '',
	plantId: '',
	plantCode: '',
	plantName: '',
	storageLocationId: '',
	storageLocationCode: '',
	storageLocationName: '',
	supplierId: '',
	supplierCode: '',
	supplierName: '',
	stockBatch: getCurrentDate(),
	accountingDate: '',
	storageTypeId: '',
	storageTypeCode: '',
	storageTypeName: '',
	autoBin: 1,
	needOnShelfConfirm: 1,
	allowInSuper: 1,
	printStorage: 0,
	printerId: '',
	printerName: '',
	deliveryDetailCode: '',
	details: [],
	checks: [],
});

// 重置表单信息 & 光标自动blur
const scanBarRef = ref();
const datekey = ref(new Date());

const scanBarRef2 = ref();
const datekey2 = ref(new Date());

const list = reactive(['收货信息', '收货明细', '收货检查']);

let curNow = ref(0);
// 表单规则定义
const rules = ref({
	deliveryCode: [
		{
			type: 'string',
			required: true,
			message: '请填写送货单号',
			trigger: ['blur', 'change']
		}
	],
	plantName: {
		type: 'string',
		required: true,
		message: '请选择工厂',
		trigger: ['blur', 'change']
	},
	storageLocationName: {
		type: 'string',
		required: true,
		message: '请选择存储地点',
		trigger: ['blur', 'change']
	},
	stockBatch: [
		{
			type: 'string',
			required: true,
			message: '请输入收货批次',
			trigger: ['blur', 'change']
		}
	],
	partnerName: [
		{
			type: 'string',
			required: true,
			message: '请选择供应商',
			trigger: ['blur', 'change']
		}
	],
	storageTypeName: {
		type: 'string',
		required: true,
		message: '请选择目标存储类型',
		trigger: ['blur', 'change']
	},
	accountingDate: {
		type: 'string',
		required: true,
		message: '请选择记账日期',
		trigger: ['blur', 'change']
	}
});

getPlants();
getPartners();

function getCurrentDate() {
    const today = new Date();
    const year = today.getFullYear();
    let month = today.getMonth() + 1;
    let day = today.getDate();

    month = month < 10 ? '0' + month : month;
    day = day < 10 ? '0' + day : day;

    return `${year}${month}${day}`;
}

// 类型选择
const actions = ref([{ name: '男' }, { name: '女' }, { name: '保密' }]);

function sectionChange(index) {
	curNow.value = index;
}

// picker选择
let plants = reactive([[]]);

let storageLocations = reactive([[]]);

let partners = reactive([[]]);

let storageTypes = reactive([[]]);

let printers = reactive([
	[
		{
			id: 1,
			printerName: '打印机1'
		}
	]
]);

const showPlant = ref(false);
const showStorageLocation = ref(false);
const showPartner = ref(false);
const showStorageType = ref(false);
const showPrinter = ref(false);

async function getDeliveryByCode(result: any) {
	umodel.deliveryCode = result;
	const data = await http({
		url: '/wms/warehousemove/getDeliveryByCode/' + umodel.deliveryCode,
		method: 'GET',
		data: {}
	});
	data.data.plantId = data.data.inboundPlantId;
	data.data.plantCode = data.data.inboundPlantCode;
	data.data.plantName = data.data.inboundPlantName;
	data.data.storageLocationId = data.data.inboundStorageLocationId;
	data.data.storageLocationCode = data.data.inboundStorageLocationCode;
	data.data.storageLocationName = data.data.inboundStorageLocationName;
	data.data.partnerId = data.data.customerId;
	data.data.partnerCode = data.data.customerCode;
	data.data.partnerName = data.data.customerName;
	data.data.needOnShelfConfirm = 1;
	data.data.allowInSuper = 1;
	data.data.stockBatch = getCurrentDate();
	
	const checks = await http({
		url: '/mdm/checkstandardsetting/getByStorageLocationId/' + data.data.storageLocationId,
		method: 'POST'
	});
	data.data.checks = checks.data;
	Object.assign(umodel, data.data);
	getStorageLocations();
	getWarehouseIdByLocation();
	
}

function checkDeliveryDetailCode(result: any) {
	umodel.deliveryDetailCode = result;
	var check = false;
	umodel.details.forEach(function (item) {
		if (item.deliveryDetailCode.trim() == umodel.deliveryDetailCode.trim()) {
			item.isCheck = true;
			check = true;
		}
	});
	if (!check) {
		uni.showToast({
			icon: 'none',
			title: '托盘条码不存在！'
		});
	}
}

async function getPartners() {
	const data = await http({
		url: '/wms/mdmpartner/getList',
		method: 'GET',
		data: {}
	});
	partners[0] = data.data;
}

async function getPlants() {
	const data = await http({
		url: '/wms/sysplant/getList',
		method: 'GET',
		data: {}
	});
	plants[0] = data.data;
}

async function getStorageLocations() {
	const data = await http({
		url: '/wms/storagelocation/getList',
		method: 'GET',
		data: {
			plantId: umodel.plantId
		}
	});
	storageLocations[0] = data.data;
}

async function getStorageTypes() {
	const data = await http({
		url: '/wms/storagetype/getList',
		method: 'GET',
		data: {
			warehouseId: umodel.warehouseId
		}
	});
	storageTypes[0] = data.data;
}

async function getWarehouseIdByLocation() {
	const data = await http({
		url: '/wms/wmsdelivery/getWarehouseIdByLocation/' + umodel.storageLocationId,
		method: 'GET',
		data: {}
	});
	umodel.warehouseId = data.data;
	getStorageTypes();
}

function plantSelect(e) {
	if (e.value.length) {
		umodel.plantId = e.value[0].id;
		umodel.plantCode = e.value[0].plantCode;
		umodel.plantName = e.value[0].plantName;
	}
	showPlant.value = false;
	getStorageLocations();
}

function storageLocationSelect(e) {
	if (e.value.length) {
		umodel.storageLocationId = e.value[0].id;
		umodel.storageLocationCode = e.value[0].storageLocationCode;
		umodel.storageLocationName = e.value[0].storageLocationName;
	}
	showStorageLocation.value = false;
	getWarehouseIdByLocation();
}

function partnerSelect(e) {
	if (e.value.length) {
		umodel.partnerId = e.value[0].id;
		umodel.partnerCode = e.value[0].partnerCode;
		umodel.partnerName = e.value[0].partnerName;
	}
	showPartner.value = false;
}

function storageTypeSelect(e) {
	if (e.value.length) {
		umodel.storageTypeId = e.value[0].id;
		umodel.storageTypeCode = e.value[0].storageTypeCode;
		umodel.storageTypeName = e.value[0].storageTypeName;
	}
	showStorageType.value = false;
}

function printerSelect(e) {
	if (e.value.length) {
		umodel.printerId = e.value[0].id;
		umodel.printerName = e.value[0].printerName;
	}
	showPrinter.value = false;
}

function openPlantSelect() {
	showPlant.value = true;
	uni.hideKeyboard();
}

function openStorageLocationSelect() {
	showStorageLocation.value = true;
	uni.hideKeyboard();
}

function openPartnerSelect() {
	showPartner.value = true;
	uni.hideKeyboard();
}

function openStorageTypeSelect() {
	showStorageType.value = true;
	uni.hideKeyboard();
}

function openPrinterSelect() {
	showPrinter.value = true;
	uni.hideKeyboard();
}

// 日期选择
const showDay = ref(false);

function daySelect(e) {
	umodel.accountingDate = e[0];
	showDay.value = false;
}

function openDaySelect() {
	showDay.value = true;
	uni.hideKeyboard();
}

// 校验提交
const uForm = ref();
const posting = ref(false);

function submit() {
	
	uForm.value.validate().then((res) => {
		umodel.inboundStorageLocationId = umodel.storageLocationId;
		umodel.inboundStorageLocationCode = umodel.storageLocationCode;
		umodel.inboundStorageLocationName = umodel.storageLocationName;
		umodel.supplierId = umodel.partnerId;
		umodel.supplierCode = umodel.partnerCode;
		umodel.supplierName = umodel.partnerName;
		umodel.inboundPlantId = umodel.plantId;
		umodel.inboundPlantCode = umodel.plantCode;
		umodel.inboundPlantName = umodel.plantName;
		umodel.inboundPlantId = umodel.plantId;
		umodel.inboundPlantCode = umodel.plantCode;
		umodel.inboundPlantName = umodel.plantName;
		posting.value = true;
		console.log(umodel);
		http({
			url: '/wms/receiveBlankMaterial/appCommit',
			method: 'POST',
			data: umodel
		}).then((res) => {
			uni.$u.toast('入库成功');
			uForm.value.resetFields();
			
			umodel.details = reactive([]);
				uForm.value.resetFields();
			curNow.value = 0;
			umodel.accountingDate= '';
			umodel.stockBatch= '';
			scanBarRef.value.reset();
		});
		posting.value = false;
		
		
	});
}
</script>

<style lang="scss">
.baseForm {
	.u-form {
		.scan-bar {
			display: flex;
			flex: 1;
		}
	}

	.u-line {
		padding: 10px 0;
	}

	.search {
		display: flex;

		.custom-style {
			// width: 120px;
			margin: 10px 5px 5px;
			height: 36px;
			border-radius: 8px;

			&:nth-child(1) {
				flex: 1;
			}

			&:nth-child(2) {
				flex: 3;
			}
		}
	}

	.list {
		.list-title {
			line-height: 40px;
			font-size: 14px;
			color: rgba(0, 0, 0, 0.4);
		}

		.card {
			margin-top: 5px;
			margin-bottom: 10px;
			border-radius: 7px;
			display: flex;
			align-items: center;
			padding: 10px 0;
			transition: all 300ms ease;
			box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);

			.left {
				// flex-basis: 90rpx;
				padding-right: 10px;
				text-align: right;
				font-size: 13px;

				.enter {
					line-height: 20px;
					margin-bottom: 5px;
				}

				.number {
					font-size: 13px;
					line-height: 18px;
				}

				:deep(.u-icon--right) {
					flex-direction: row-reverse;
				}
			}

			.right {
				flex: 1;
				padding-left: 15px;

				.title {
					font-size: 15px;
					line-height: 20px;
					margin-bottom: 5px;
				}

				.body {
					color: rgba(0, 0, 0, 0.4);
					font-size: 13px;
					line-height: 18px;
				}
			}
		}
	}
}
</style>
